<template>
  <div class="page-container">
    <div class="img-box">
      <img class="global-slide-up-animation img" src="@/assets/images/error-page/403.svg" draggable="false" />
    </div>
    <div class="subject-box">
      <div class="global-slide-up-animation title" style="animation-delay: 0.1s">抱歉!</div>
      <div class="global-slide-up-animation subtitle" style="animation-delay: 0.2s">您没有访问权限...</div>
      <div class="explain global-slide-up-animation" style="animation-delay: 0.3s">当前帐号没有权限访问该页面,请联系管理员。</div>
      <a class="butt global-slide-up-animation" style="animation-delay: 0.4s" @click="$throttle(navigate)">
        <span v-if="haveHome" style="margin-right: 6px">{{ jumpTime }}s</span>
        <span>{{ redirectPath ? '返回上一页' : '退出登录' }}</span>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
  const tabsStore = useTabsStore();
  const route = useRoute();
  const router = useRouter();
  const appStore = useAppStore();
  const haveHome = shallowRef(false);
  let timer: NodeJS.Timeout | undefined = undefined;
  const jumpTime = shallowRef(5);
  const redirectPath = route.query && route.query.redirect && route.query.redirect.indexOf(route.fullPath || route.path) ? (route.query.redirec as string) : '';
  onMounted(() => {
    if (redirectPath) {
      haveHome.value = true;
      timer = setInterval(() => {
        if (jumpTime.value) {
          jumpTime.value--;
        } else {
          timer && clearInterval(timer);
          timer = undefined;
          router.push((route.query.redirect as string) || appStore.homeRoute);
        }
      }, 1000);
    } else {
      haveHome.value = false;
    }
  });

  /** 导航 */
  function navigate() {
    if (redirectPath) {
      router.replace((route.query.redirect as string) || appStore.homeRoute);
    } else {
      useUserStore().logout(false);
    }
  }

  onBeforeRouteLeave(() => {
    tabsStore.delTabsByPath(route.fullPath);
    timer && clearInterval(timer);
    return true;
  });
</script>

<style lang="scss" scoped src="../err-page.scss"></style>
@/pinia/modules/tabs
